<template>
    <div class="cart-container container">
        <div class="cart-header">
            <h2>购物车</h2>
            <el-button type="text" @click="clearCart">清空购物车</el-button>
        </div>

        <div v-if="cartItems.length === 0" class="empty-cart">
            <el-empty description="购物车还是空的，快去选购商品吧！">
                <el-button type="primary" @click="$router.push('/')">去逛逛</el-button>
            </el-empty>
        </div>

        <div v-else>
            <el-table :data="cartItems" style="width: 100%" border>
                <el-table-column type="selection" width="55" />
                <el-table-column label="商品信息" width="500">
                    <template #default="{ row }">
                        <div class="product-info">
                            <el-image :src="row.image" class="product-image" />
                            <div class="product-detail">
                                <div class="title">{{ row.title }}</div>
                                <div class="spec">规格: {{ row.spec }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单价" width="120">
                    <template #default="{ row }">
                        <div class="price">¥{{ row.price }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="150">
                    <template #default="{ row }">
                        <el-input-number
                                v-model="row.quantity"
                                :min="1"
                                :max="99"
                                @change="updateQuantity(row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="小计" width="120">
                    <template #default="{ row }">
                        <div class="subtotal">¥{{ (row.price * row.quantity).toFixed(2) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="{ row }">
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(row.id)" />
                    </template>
                </el-table-column>
            </el-table>

            <div class="cart-footer">
                <div class="total-info">
                    共 <span class="total-count">{{ totalCount }}</span> 件商品，合计：
                    <span class="total-price">¥{{ totalPrice.toFixed(2) }}</span>
                </div>
                <el-button type="danger" size="large" @click="checkout">去结算</el-button>
            </div>
        </div>

        <!-- 推荐商品 -->
        <div class="section-title">猜你喜欢</div>
        <el-row :gutter="20">
            <el-col
                    v-for="product in recommendProducts"
                    :key="product.id"
                    :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
            >
                <product-card :product="product" />
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import ProductCard from '@/components/ProductCard.vue'
import { computed, ref } from 'vue'  // 添加 ref 导入
export default {
    components: { ProductCard },
    setup() {
        const store = useStore()
        const router = useRouter()

        const cartItems = computed(() => store.state.cartItems)

        const totalCount = computed(() => {
            return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
        })

        const totalPrice = computed(() => {
            return cartItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
        })

        const recommendProducts = ref([
            {
                id: 101,
                title: '手机支架 桌面支架',
                image: 'https://via.placeholder.com/300x300/666666/ffffff?text=手机支架',
                price: 29.9,
                sold: 5200,
                shop: '数码配件店',
                location: '深圳'
            },
            {
                id: 102,
                title: '钢化膜 iPhone 14 Pro Max',
                image: 'https://via.placeholder.com/300x300/cccccc/ffffff?text=钢化膜',
                price: 39.9,
                sold: 12000,
                shop: '数码配件店',
                location: '深圳'
            },
            {
                id: 103,
                title: '快充充电器 30W',
                image: 'https://via.placeholder.com/300x300/ff9900/ffffff?text=充电器',
                price: 89,
                sold: 6500,
                shop: '数码配件店',
                location: '深圳'
            },
            {
                id: 104,
                title: '无线充电宝 10000mAh',
                image: 'https://via.placeholder.com/300x300/3366cc/ffffff?text=充电宝',
                price: 199,
                sold: 3200,
                shop: '数码配件店',
                location: '深圳'
            }
        ])

        const updateQuantity = (item) => {
            store.commit('updateCartItem', {
                id: item.id,
                quantity: item.quantity
            })
        }

        const removeItem = (id) => {
            store.commit('removeFromCart', id)
        }

        const clearCart = () => {
            ElMessageBox.confirm('确定要清空购物车吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                store.commit('clearCart')
            })
        }

        const checkout = () => {
            router.push('/checkout')
        }

        return {
            cartItems,
            totalCount,
            totalPrice,
            recommendProducts,
            updateQuantity,
            removeItem,
            clearCart,
            checkout
        }
    }
}
</script>

<style scoped>
.cart-container {
    margin-top: 20px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.empty-cart {
    background: white;
    padding: 50px 0;
    border-radius: 4px;
    text-align: center;
}

.product-info {
    display: flex;
    align-items: center;
}

.product-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
}

.product-detail {
    flex: 1;
}

.product-detail .title {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.product-detail .spec {
    font-size: 12px;
    color: var(--gray-text);
}

.price, .subtotal {
    font-weight: bold;
}

.price {
    color: var(--primary-color);
}

.cart-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    background: white;
    border-radius: 4px;
}

.total-info {
    margin-right: 30px;
    font-size: 16px;
}

.total-count {
    color: var(--primary-color);
    font-weight: bold;
}

.total-price {
    color: var(--primary-color);
    font-size: 24px;
    font-weight: bold;
}

.el-button--danger {
    width: 150px;
    height: 50px;
    font-size: 18px;
}
</style>